<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>首页</title>

		<link rel="stylesheet" type="text/css" th:href="@{/smartParking/css/themes/default/easyui.css}">
		<link rel="stylesheet" type="text/css" th:href="@{/smartParking/css/themes/icon.css}">
		<link rel="stylesheet" type="text/css" th:href="@{/smartParking/css/demo.css}">

		<script type="text/javascript"  th:src="@{/smartParking/js/jquery.min.js}"></script>
		<script type="text/javascript" th:src="@{/smartParking/js/jquery.easyui.min.js}"></script>
			
		<!-- 引入自定义样式 -->
		<link rel="stylesheet" type="text/css" th:href="@{/smartParking/css/home/home.css}"/>
			
		<!-- 引入 Echarts -->
		<script type="text/javascript" th:src="@{/smartParking/js/echart/echarts.js}"></script>
		<!-- 引入 Echarts 主题js -->
		<script type="text/javascript" th:src="@{/smartParking/js/echart/macarons.js}"></script>
		
		<!-- 引入moment.js日期格式化插件 -->
		<script type="text/javascript" th:src="@{/smartParking/js/tools/moment.js}"></script>
		
	</head>
	<body>
		<!-- 右侧标题信息 -->
		<div class="title">
			<div class="date">
				<p id="time"></p>
			</div>
			
			<div class="message">
				<p id="now">当前停车场：地下一层停车场</p>
			</div>
		</div>


		<!-- 中间数据模块 -->
		<div class="data">
			<!-- 车流量 -->
			<div id="traffic_flow" class="mode">
				<p>当前车流</p>
				<p>1888</p>
			</div>
			<!-- 已收费用 -->
			<div id="received_fees" class="mode">
				<p>已收费用</p>
				<p>1888</p>
			</div>
			<!-- 待收费用 -->
			<div id="receive_fees" class="mode">
				<p>待收费用</p>
				<p>1888</p>
			</div>
			<!-- 已用车位 -->
			<div id="used_space" class="mode">
				<p>已用车位</p>
				<p>50/100</p>
			</div>
			<!-- 空车位 -->
			<div id="empty_space" class="mode">
				<p>空车位</p>
				<p>50</p>
			</div>
		</div>
		
		
		
		<!-- 图表的标题 -->
		<div class="label">
			<span>收入统计图</span>
			<div class="datetime">
				<input id="datetime1" type="text" class="easyui-datebox" required="required"  style="height: 30px;">
			</div>
		</div>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main"></div>
		
		
		
		<!-- 右侧数据统计信息 -->
		<div class="total_count">
			<div>
				<p class="count_title">当前收入</p>
				<p class="count_data">￥2345 </p>
			</div>
			<div>
				<p class="count_title">进场车流</p>
				<p class="count_data">567辆</p>
			</div>
			<div>
				<p class="count_title">出场车流</p>
				<p class="count_data">535辆</p>
			</div>
			<div>
				<p class="count_title">平均停车时长</p>
				<p class="count_data">1小时32分</p>
			</div>
		</div>
		
		
		<!-- 为下面的折线图ECharts准备一个具备大小（宽高）的Dom -->
		<div class="lines">
			<div id="other1">
				<div class="line_title" id="title1">
					<p>进出场流量图</p>
				</div>
				<!-- 绘图区 -->
				<div id="draws1"></div>
				<div class="datetime">
					<input id="dt2" type="text" class="easyui-datebox" required="required"  style="height: 30px;">
				</div>
			</div>
			
			<div id="other2">
				<div class="line_title" id="title2">
					<p>车位利用率</p>
				</div>
				<!-- 绘图区 -->
				<div id="draws2"></div>
			</div>
		</div>

		
		

		<!-- ecahrt图表显示 -->
		<script type="text/javascript" th:src="@{/smartParking/js/home/my_echarts.js}"></script>
		
		<!-- 日期显示 -->
		<script type="text/javascript">
			setInterval(() =>{
				var time = new Date();
				var format = moment(time).format("YYYY年MM月DD日  HH:mm:ss");
				
				$(".date #time").text(format);
			})
		</script>
	</body>
</html>
